<template>
	<view class="container">
	<!-- 自定义导航栏 -->
	<uni-nav-bar :border="false" backgroundColor="transparent" title="我的拼团" :fixed="false" color="#fff">
		<block v-slot:left>
			<uni-icons class="rr-icons"  type="back" color="#fff" size="24"  @click="back()"></uni-icons>
		</block>
	</uni-nav-bar>
		<!-- 内容 -->
		<view class="content">
			<!-- 顶部 -->
			<view class="topbox">
				<!-- 提示 -->
				<view class="notice">
					<uni-notice-bar style="margin-bottom: 0;padding:10upx;" background-color="rgba(0,0,0,0.4)" show-icon scrollable :text="data.notice||'用户187****1234 拼团成功！'" />
				</view>
				<!-- 规则 -->
<!-- 				<view class="gz"  @click.stop="$goURl('/pages/personal/agreement/agreement?code=3')">
					活动规则
				</view> -->
			</view>
			<view class="goodsbox">
				<view class="user">
					<image class="head" :src="data.userInfo.head||$defaultAvatar" mode=""></image>
				</view>
				<view class="nickname">
					{{data.userInfo.nickname||data.userInfo.mobile}}
				</view>
				<!-- 商品信息 -->
				<view class="goods">
					<view class="image">
						<image :src="data.goods.img" mode="aspectFill"></image>
					</view>
					<view class="goodsinfo">
						<view class="title textsl2">
							{{data.goods.name}}
						</view>
						<view class="titles textsl1">
							{{data.goods.title}}
						</view>
						<view class="prcie">
							<view class="prcie1">
								￥{{$toFiexd(data.goods.price,2)}}
							</view>
		<!-- 					<view class="prcie2">
								剩余<text>{{$toFiexd(data.info.price,2)}}</text>件
							</view> -->
						</view>
					</view>
				</view>
				<view class="pricetitle">
					 已拼<text>{{data.list.length}}</text>人，还差<text>{{data.user.participate}}</text>人成团
				</view>
				<!-- 进度条 -->
				<!-- <view class="jdt" v-if="data.state">
					<view class="jdts" :style="{width:$toFiexd((Number(data.info.market)-Number(data.info.money))/(Number(data.info.market)-Number(data.info.price)),2)*100+'%'}">
						<image src="http://pubuimg.cqguanjie.cn/icon/16995200505177.png" mode=""></image>
					</view>
				</view> -->
				<!-- 剩余时间 -->
				<view class="timer" v-if="data.state&&data.info.UpdatedAt&&data.info.state==0">
					剩余时间：<uni-countdown :show-day="false" :hour="data.info.UpdatedAt[0]" :minute="data.info.UpdatedAt[1]" :second="data.info.UpdatedAt[2]" color="#FFFFFF" background-color="#000"/>
				</view>
				<view v-if="data.user.mobile==data.userInfo.mobile&&data.info.data.state==0">
					<view class="btns" v-if="!data.state">
						活动已失效
					</view>
					<view class="boxs" v-if="data.state">
						<view class="btns1"  @click="popups.open('bottom')">
							分享给好友拼团
						</view>
						<!-- <view class="btns2" @click="creat()">
							立即购买
						</view> -->
					</view>
				</view>
				<view class="btnss" v-if="data.user.mobile==data.userInfo.mobile&&data.info.state==1"   @click="creat()">
					立即购买
				</view>
			</view>
			<view class="listboxss" v-if="true">
				<view class="titlebox">
					<image src="http://pubuimg.cqguanjie.cn/icon/16995200709698.png" mode=""></image>
					已有{{data.list.length}}人参与
					<image src="http://pubuimg.cqguanjie.cn/icon/16995200841650.png" mode=""></image>
				</view>
				<view class="list">
					<view v-for="(item,index) in data.list" :key="item.ID">
						<view class="item">
							<view class="left">
								<view class="head">
									<image :src="item.head||$defaultAvatar" mode=""></image>
								</view>
								<view class="info">
									<view class="name">
										{{item.nickname||item.mobile}}
									</view>
									<view class="level">
										{{item.user_id}}
									</view>
								</view>
							</view>
							<!-- <view class="right">
								<uni-dateformat :date="$clearTime(item.CreatedAt)" :threshold="[0,3600000]"></uni-dateformat>
							</view> -->
						</view>
						<view class="line" v-if="index<data.list.length-1"></view>
					</view>
				</view>
				<view class="" v-if="data.list.length==0">
					<empty></empty>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" >
			<view class="popupbox">
				<image class="trimg" src="http://pubuimg.cqguanjie.cn/icon/16995201203877.png" mode="" @click="popup.close()"></image>
				<view class="user">
					<image class="head" :src="data.user.head||$defaultAvatar" mode=""></image>
				</view>
				<view class="title">
					你帮 <text>{{data.user.nickname||data.user.mobile}}</text> 用户
				</view>
				<view class="titles">
					砍掉了<text>￥{{$toFiexd(data.bargainingmoney,2)}}</text>
				</view>
				<view class="imgbox">
					<image class="leftimg" src="http://pubuimg.cqguanjie.cn/icon/16995201348813.png" mode=""></image>
					<image class="centerimg" src="http://pubuimg.cqguanjie.cn/icon/16995201497451.png" mode=""></image>
					<image class="rightimg" src="http://pubuimg.cqguanjie.cn/icon/16995201666856.png" mode=""></image>
				</view>
				<view class="popupbtn"  @click="popup.close()">
					我知道了
				</view>
			</view>

		</uni-popup>
		<uni-popup ref="popups" >
			<view class="sharebox">
				<view class="selectBank">
					<text class="selectMdd">分享好友</text>
					<uni-icons type="closeempty" size="20" class="popupIcon" @click="popups.close()"></uni-icons>
				</view>
				<view class="text">
					{{data.share}}
				</view>
				<view class="copy" @click="share()">
					复制
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const { appContext,proxy } = getCurrentInstance();
	const data = reactive({
		id:'',
		type:false,
		userInfo:{},
		list:[],
		goods:{},
		info:{},
		user:{},
		state:true,
		share:'我马上就|要拼团成功~求求你帮我~ 复制打开【模版】 14HUF',
		bargainingmoney:0,
		notice:'',
		index:0
	})
	let popup=ref()
	let popups=ref()
	
	onLoad((option)=>{
		data.id=option.id
		getGoods(option.id)
	})
	onShow(()=>{
		data.userInfo=uni.getStorageSync('userInfo')
		data.share=`我马上就|要拼团成功~求求你帮我~ 复制打开【${proxy.$store.state.name}】MK${data.id}HM`
		bargainingSuccessList()
		
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
	function setstr(str){
		return str.slice(0,4)+'**'+str.slice(str.length-4,str.length)
	}
	function bargainingSuccessList(){
		
		appContext.config.globalProperties.$request({
			url:`api/bargaining/bargainingSuccessList/`,
			method:'GET',
			success:(res)=>{
				if(res.data.data.length!=0){
					data.notice='用户'+ setstr(res.data.data[0].user.mobile)+'拼团成功！'
					console.log('data.notice',data.notice)
				}
			}
		})
	}
	function back(){
		uni.navigateBack()
	}
	function creat(){
		appContext.config.globalProperties.$request({
			url: `api/bargaining/buyBargaining/`,
			method: 'POST',
			data:{
				id:Number(data.info.attribute_id),
				goods_id:Number(data.info.ID)
			},
			success(res) {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){

					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/order/createorder?id='+res.data
						})
					},1000)
				}
			}
		})
	}
	function getGoods(id){
		appContext.config.globalProperties.$request({
			url: `api/teamwork/joiningGroups/${id}/`,
			method: 'post',
			success(res) {
				try{
					let time=new Date(appContext.config.globalProperties.$clearTime(res.data.CreatedAt))
					let times=new Date(time.setMinutes(time.getMinutes()+res.data.duration))
					let today=new Date()
					var difftime = (times - today)/1000;
					console.log(difftime)
					if(difftime<0){
						data.state=false
					}
					var days = parseInt(difftime/86400); // 天  24*60*60*1000 
					var hours = parseInt(difftime/3600)-24*days;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
					var minutes = parseInt(difftime%3600/60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
					var seconds = parseInt(difftime%60);  // 以60秒为一整份 取余 剩下秒数	
					console.log("时间差是: "+days+"天, "+hours+"小时, "+minutes+"分钟, "+seconds+"秒");	
					res.data.UpdatedAt=[hours,minutes,seconds]
				}catch(e){
					//TODO handle the exception
				}
				data.goods=res.data.data.goods
				data.info=res.data
				data.user=res.data.data
				data.list=res.data.userList
			}
		})
	}
	function bargainings(id){
		if(data.index==0){
					data.index=1
			appContext.config.globalProperties.$request({
				url: `api/bargaining/bargainingList/`,
				method: 'PUT',
				data:{id:id},
				success(res) {
					if(res.errno==0){
						data.bargainingmoney=res.data
						popup.value.open()
						
						setTimeout(()=>{
							getGoods(data.id)
						},500)
					}else{
						uni.showToast({
							icon:'none',
							title:res.errmsg
						})
					}
				}
			})
		}
		
	}	
	function share(){
		//我马上就l要提现了~求求你帮我~ 复制打开【拼】好运【多多】??????蚕豆木栓表象暑期 14HUF
		//
		uni.setClipboardData({
			data: data.share,
			success: function () {
				console.log('success');
				uni.showToast({
					icon:'none',
					title:'复制成功'
				})
			}
		});

	}
</script>

<style lang="scss" scoped>
	.container{
		// width: 100vw;
		min-height: 100vh;
		background-image: url('https://pili-vod.guanxikeji.com/houdejia/img/1710495210869.png');
		background-repeat: no-repeat;
		background-size: 100vw 100%;
		.content{
			width: 100vw;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			overflow-y: scroll;
			.topbox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.notice{
					width: 50%;
					border-radius: 40upx;
					overflow: hidden;
					margin-left: 20upx;
				}
				.gz{
					background-color: rgba(0,0,0,0.4);
					color: #fff;
					font-size: 12px;
					border-radius: 30upx 0 0 30upx;
					padding: 10upx;
				}
			}
			.goodsbox{
				width: calc(100% - 60upx);
				background-color: #fff;
				border-radius: 30upx;
				margin: 30upx;
				margin-top: 60upx;
				position:relative ;
				padding-bottom: 20upx;
				padding-top: 90upx;
				.user{
					position:absolute;
					width: 60px;
					height: 60px;
					box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
					.head{
						width: 56px;
						height: 56px;
						border-radius: 50%;
						margin-top: 2px;
					}
					left: calc(50% - 60upx);
					top: -30upx;
				}
				.nickname{
					text-align: center;
					font-size: 14px;
				}
				.goods{
					display: flex;
					padding: 20upx;
					border-bottom: 1upx solid #eee;
					.image{
						width: 90px;
						height: 90px;
						margin-right: 20upx;
						image{
							width: 90px;
							height: 90px;
							border-radius: 20upx;
						}
					}
					.goodsinfo{
						width: calc(100% - 90px - 20upx);
						.title{
							font-size: 16px;
							font-weight: bold;
						}
						.titles{
							font-size: 12px;
							color: #999;
							margin-top: 10upx;
							margin-bottom: 10upx;
						}
						.prcie{
							font-size: 14px;
							display: flex;
							justify-content: space-between;
							.prcie1{
								color: #FE2406;
							}
							.prcie2{
								color: #999;
								text{
									color: #FE2406;
								}
							}
						}
					}
				}
				.pricetitle{
					text-align: center;
					font-size: 14px;
					margin-top: 20upx;
					text{
						color: #FE2406;
					}
				}
				.jdt{
					margin: 30upx;
					height: 13px;
					border-radius: 30upx;
					background-color: #FFE0D6;
					.jdts{
						height: 13px;
						width: 50%;
						background:linear-gradient(60deg,#FE2406,#FF9D1C,#FE2406,#FF9D1C,#FE2406,#FF9D1C,#FE2406,#FF9D1C,#FE2406,#FF9D1C,#FE2406,#FF9D1C,#FE2406,#FF9D1C,#FE2406) ;
						border-radius: 30upx;
						position: relative;
						image{
							width: 26px;
							height: 26px;
							position: absolute;
							border-radius: 50%;
							left:calc(100% - 13px);
							top: -6px;
						}
					}
				}
				.timer{
					display: flex;
					justify-content: center;
					font-size: 14px;
					align-items: center;
					color: #999;
				}
				.btns{
					background: linear-gradient(to bottom,#FFA78C,#FE9181);
					color: #fff;
					margin: 30upx;
					text-align: center;
					padding: 20upx;
					border-radius: 40upx;
					font-size: 14px;
				}
				.btnss{
					background: linear-gradient(to bottom,#FE2406,#FF521C);
					color: #fff;
					margin: 30upx;
					text-align: center;
					padding: 20upx;
					border-radius: 40upx;
					font-size: 14px;
				}
				.boxs{
					display: flex;
					justify-content: center;
					.btns1{
						width: 60%;
						background: linear-gradient(to bottom,#FE2406,#FF521C);
						color: #fff;
						margin: 30upx;
						text-align: center;
						padding: 20upx;
						border-radius: 40upx;
						font-size: 14px;
						box-shadow: 0 2px 6px 1px rgba(254, 36, 6, 0.45);
					}
					.btns2{
						width: 40%;
						background: linear-gradient(to bottom,#FFD500,#FF951C);
						color: #fff;
						margin: 30upx;
						text-align: center;
						padding: 20upx;
						border-radius: 40upx;
						font-size: 14px;
						box-shadow: 0 2px 6px 1px rgba(254, 165, 10, 0.4);
					}
				}
			}
			.listboxss{
				margin: 30upx;
				padding: 30upx;
				background-color: #fff;
				border-radius: 30upx;
				position: relative;
				.titlebox{
					display: flex;
					justify-content: center;
					align-items: flex-start;
					font-size: 16px;
					// font-weight: bold;
					color:#FE2406;
					image{
						width: 20px;
						height: 21px;
						margin:0 10upx;
					}
				}
				.list{
					.item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20upx;
						.left{
							display: flex;
							
							.head{
								width: 80upx;
								height: 80upx;
								border-radius: 50%;
								overflow: hidden;
								image{
									width: 80upx;
									height: 80upx;
									border-radius: 50%;
								}
							}
							.info{
								margin-left: 20upx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.name{
									font-size: 32upx;
									font-weight: bold;
								}
								.level{
									font-size: 24upx;
									color:#ACB4CC;
								}
							}
						}
						.right{
							font-size: 24upx;
							color:#ACB4CC;
							text{
								margin-left: 10upx;
								font-size: 12px;
								color:#FFA41C;
							}
						}
					}
				}
			}
		}
	}
				@keyframes leftimg{
					20%{
						margin-right: -21px;
						margin-bottom: 9px;
					}
					100%{
						margin: 0;
						transform: rotate(0deg);
					}
				}
				@keyframes centerimg{
					0%{
						top: -60px;
						right: -60px;
					}
					100%{
						top: 30px;
						right: 30px;
						width: 70px;
						height: 70px;
					}
				}
				@keyframes rightimg{
					20%{
						margin-top: 9px;
						margin-left: -21px;
					}
					100%{
						margin: 0;
						transform: rotate(0deg);
					}
				}
				.popupbox{
					width: 480upx;
					display: flex;
					background-color:#fff;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20upx;
					border-radius: 20upx;
					position: relative;
					padding-top: 60px;
					.trimg{
						position: absolute;
						right: -5px;
						top: -5px;
						width: 25px;
						height: 25px;
						z-index: 99;
					}
					.user{
						position:absolute;
						width: 60px;
						height: 60px;
						box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);
						background-color: #fff;
						border-radius: 50%;
						text-align: center;
						padding-top: 2px;
						.head{
							width: 56px;
							height: 56px;
						}
						left: calc(50% - 60upx);
						top: -30px;
					}
					.title{
						font-size: 16px;
						font-weight: bold;
						color: #333;
						text{
							color: #FE2406;
						}
					}
					.titles{
						font-size: 20px;
						font-weight: bold;
						margin-top: 20upx;
						color: #333;
						text{
							color: #FE2406;
						}
					}
					.imgbox{
						width: 120px;
						height: 120px;
						display: flex;
						align-items: center;
						justify-content: center;
					    background-color: #fff;
							position: relative;
							overflow: hidden;
							image{
								width: 50px;
								height: 50px;
							}
							.leftimg{
								margin-right: -21px;
								margin-bottom: 9px;
								animation-name: leftimg;
								animation-duration: 1s;
								animation-delay:1s;
								animation-fill-mode:forwards;
							}
							.centerimg{
								top: -60px;
								right: -60px;
								position: absolute;
								animation-name: centerimg;
								animation-duration: 1s;
								animation-delay:1s;
								animation-fill-mode:forwards;
							}
							.rightimg{
								margin-top: 9px;
								margin-left: -21px;
								transform: rotate(-3deg);
								animation-name: rightimg;
								animation-duration: 1s;
								animation-delay:1s;
								animation-fill-mode:forwards;
							}
					}
					.popupbtn{
						background: linear-gradient(to bottom,#FE2406,#FF521C);
						color: #fff;
						text-align: center;
						padding: 15upx 80upx;
						border-radius: 40upx;
						border: 1px solid #F9C61B;
						box-shadow: 0 2px 6px 1px rgba(254, 36, 6, 0.45);
					}
				}
	      .sharebox{
					padding: 20upx 20upx;
					background-color: #fff;
					border-radius: 30upx 30upx 0 0 ;
					.selectBank{
						width: 94%;
						margin: 0 auto;
						position: relative;
						text-align: center;
						padding: 10px 0;
						border-top-left-radius: 20px;
						border-top-right-radius: 20px;
						.selectMdd{
							color: #333333;
							font-size: 30upx;
							font-weight: 600;
						}
						.popupIcon{
							position: absolute;
							right: 0%;
							top: 10px;
						}
					}
					.text{
						background-color: #f5f5f5;
						padding: 20upx;
						border-radius: 20upx;
						font-size: 14px;
						margin-top: 20upx;
					}
					.copy{
						text-align: center;
						margin: 20upx 0;
						padding: 20upx;
						background-color: #FE2406;
						color:#fff;
						border-radius: 10upx;
						font-size: 16px;
					}
				}
</style>
